<template>
  <div class="class-info-container">
    <Sidebar
      :classes="classList"
      @class-selected="loadStudents"
    />
    <div class="content-area">
      <div class="page-title" v-if="selectedClass">
        <h1>班级: {{ selectedClass.name }}</h1>
      </div>
      <StudentTable
        :students="students"
        @update:students="handleStudentsUpdate"
        @delete:student="handleStudentDelete"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import Sidebar from '../../components/ClassGovern/SideBar.vue';
import StudentTable from '../../components/ClassGovern/StudentTable.vue';
import { fetchClassList, fetchStudentsByClassId, updateStudents, deleteStudentById } from '../api/studentApi';
import { ClassInfo, type Student } from '../../types/student';

export default defineComponent({
  components: {
    Sidebar,
    StudentTable
  },
  setup() {
    const classList = ref<ClassInfo[]>([
      { id: 1, grade: 6, classNum: 1 },
      { id: 2, grade: 6, classNum: 2 },
      { id: 3, grade: 6, classNum: 3 },
      { id: 4, grade: 6, classNum: 4 },
      { id: 5, grade: 6, classNum: 5 },
    ]);
    const selectedClass = ref<ClassInfo | null>(classList.value[0] || null);
    const students = ref<Student[]>([]);

    const loadStudents = async (classId: number) => {
      const cls = classList.value.find(c => c.id === classId);
      if (!cls) return;
      selectedClass.value = cls;
      // 在实际应用中，这里应该从后端获取数据
      students.value = [
        { id: 1, name: '张三', password: '123456', activityLevel: 85, score: 90, studyStatus: '良好' },
        { id: 2, name: '李四', password: '654321', activityLevel: 70, score: 85, studyStatus: '一般' },
        { id: 3, name: '王五', password: '111111', activityLevel: 90, score: 95, studyStatus: '优秀' },
      ];
    };

    const handleStudentsUpdate = (updatedStudents: Student[]) => {
      students.value = updatedStudents;
      // 在实际应用中，这里应该调用后端 API 更新数据
      console.log('Students updated:', updatedStudents);
    };

    const handleStudentDelete = (studentId: number) => {
      students.value = students.value.filter(s => s.id !== studentId);
      // 在实际应用中，这里应该调用后端 API 删除数据
      console.log('Student deleted:', studentId);
    };

    onMounted(() => {
      loadStudents(classList.value[0].id);
    });

    return {
      classList,
      selectedClass,
      students,
      loadStudents,
      handleStudentsUpdate,
      handleStudentDelete
    };
  }
});
</script>

<style scoped>
.class-info-container {
  display: flex;
  width: 100%;
  height: 100vh;
}

.content-area {
  flex: 1;
  padding: 20px;
}

.page-title {
  margin-bottom: 20px;
}
</style>
